<template>
  <view class="booking-container">
    <!-- 服务类型选择 -->
    <view class="service-type-section">
      <view class="section-title">服务类型</view>
      <view class="service-types">
        <view 
          v-for="(type, index) in serviceTypes" 
          :key="index"
          class="type-item"
          :class="{ active: selectedType === type.value }"
          @tap="selectType(type.value)"
        >
          <text class="type-label">{{ type.label }}</text>
        </view>
      </view>
    </view>

    <!-- 预约信息 -->
    <view class="booking-section">
      <view class="section-title">预约信息</view>
      
      <!-- 车位申请表单 -->
      <block v-if="selectedType === 'parking'">
        <view class="form-item">
          <text class="label">车牌号码</text>
          <input v-model="bookingInfo.plateNumber" placeholder="请输入车牌号码" />
        </view>
        <view class="form-item">
          <text class="label">车位类型</text>
          <picker 
            :range="parkingTypes" 
            @change="onParkingTypeChange"
          >
            <view class="picker-value">{{ parkingTypes[bookingInfo.parkingTypeIndex] || '请选择车位类型' }}</view>
          </picker>
        </view>
      </block>

      <!-- 球场预约表单 -->
      <block v-if="selectedType === 'court'">
        <view class="form-item">
          <text class="label">场地类型</text>
          <picker 
            :range="courtTypes" 
            @change="onCourtTypeChange"
          >
            <view class="picker-value">{{ courtTypes[bookingInfo.courtTypeIndex] || '请选择场地类型' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">预约日期</text>
          <picker 
            mode="date" 
            :start="today" 
            :end="maxDate"
            @change="onDateChange"
          >
            <view class="picker-value">{{ bookingInfo.date || '请选择日期' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">预约时段</text>
          <picker 
            :range="timeSlots" 
            @change="onTimeSlotChange"
          >
            <view class="picker-value">{{ timeSlots[bookingInfo.timeSlotIndex] || '请选择时段' }}</view>
          </picker>
        </view>
      </block>

      <!-- 就餐预约表单 -->
      <block v-if="selectedType === 'dining'">
        <!-- 就餐预约相关字段 -->
      </block>

      <!-- 其他服务预约表单 -->
      <block v-if="selectedType === 'other'">
        <!-- 其他服务相关字段 -->
      </block>

      <!-- 通用信息 -->
      <view class="form-item">
        <text class="label">联系电话</text>
        <input v-model="bookingInfo.phone" placeholder="请输入联系电话" />
      </view>
      <view class="form-item">
        <text class="label">备注说明</text>
        <textarea 
          v-model="bookingInfo.remarks" 
          placeholder="请输入备注信息"
          class="remarks-input"
        ></textarea>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="button-group">
      <button 
        class="submit-button" 
        @tap="submitBooking" 
        :disabled="!isFormValid"
      >
        提交预约
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      serviceTypes: [
        { label: '车位申请', value: 'parking' },
        { label: '球场预约', value: 'court' },
        { label: '就餐预约', value: 'dining' },
        { label: '其他服务', value: 'other' }
      ],
      selectedType: 'parking',
      parkingTypes: ['地下车位', '地面车位', '访客车位'],
      courtTypes: ['篮球场', '网球场', '羽毛球场'],
      timeSlots: ['09:00-10:00', '10:00-11:00', '14:00-15:00', '15:00-16:00'],
      bookingInfo: {
        plateNumber: '',
        parkingTypeIndex: -1,
        courtTypeIndex: -1,
        date: '',
        timeSlotIndex: -1,
        phone: '',
        remarks: ''
      }
    }
  },

  computed: {
    today() {
      return new Date().toISOString().split('T')[0]
    },
    maxDate() {
      const date = new Date()
      date.setDate(date.getDate() + 30)
      return date.toISOString().split('T')[0]
    },
    isFormValid() {
      // 根据不同类型验证表单
      const baseValid = this.bookingInfo.phone.length === 11
      
      switch(this.selectedType) {
        case 'parking':
          return baseValid && this.bookingInfo.plateNumber && this.bookingInfo.parkingTypeIndex !== -1
        case 'court':
          return baseValid && this.bookingInfo.courtTypeIndex !== -1 && 
                 this.bookingInfo.date && this.bookingInfo.timeSlotIndex !== -1
        default:
          return baseValid
      }
    }
  },

  methods: {
    selectType(type) {
      this.selectedType = type
      this.resetBookingInfo()
    },

    resetBookingInfo() {
      this.bookingInfo = {
        plateNumber: '',
        parkingTypeIndex: -1,
        courtTypeIndex: -1,
        date: '',
        timeSlotIndex: -1,
        phone: this.bookingInfo.phone,
        remarks: ''
      }
    },

    // ... 其他方法实现
  }
}
</script>

<style lang="scss">
.booking-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.service-type-section, .booking-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(106, 17, 203, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #6a11cb;
}

.service-types {
  display: flex;
  flex-wrap: wrap;
  
  .type-item {
    width: 25%;
    padding: 20rpx 10rpx;
    text-align: center;
    position: relative;

    &.active {
      background: #f0f0f0;
      
      .type-label {
        color: #6a11cb;
        font-weight: bold;
      }
    }

    .type-label {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.booking-section {
  .form-item {
    padding: 20rpx 0;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .label {
      font-size: 28rpx;
      color: #333;
    }

    .picker-value {
      font-size: 28rpx;
      color: #999;
    }
  }
}

.button-group {
  padding: 0 20rpx;
  margin: 40rpx 0;
}

.submit-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(135deg, #6a11cb 0%, #8e44ad 100%);
  color: #fff !important;
  border-radius: 45rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  box-shadow: 0 8rpx 20rpx rgba(106, 17, 203, 0.3);
  
  &:disabled {
    background: #cccccc;
    box-shadow: none;
  }
}
</style>
